{% extends 'index.html' %}

{% block scripts %}
	<link rel="stylesheet" href="{{ MEDIA_URL }}css/jquery-ui.css" />
    <script src="{{ MEDIA_URL }}js/jquery.min.js"></script>
    <script src="{{ MEDIA_URL }}js/jquery-ui.js"></script>
    
    <style>
		#leftcolumn  { width: 15%; float: left;  height: 46px }
		#rightcolumn { width: 85%; float: right; height: 46px }
	</style>
	
    <script>
		$(function() {
			$( "#id_fecha_limite" ).datepicker({
				minDate: +1,
				maxDate: '+2y',
				dateFormat: 'dd/mm/yy',
				showOtherMonths: true,
				selectOtherMonths: true,
				changeYear: true,
				changeMonth: true
			});
		});
    </script>
{% endblock %}

{% block panel %}
	<li class="active"><a href="/main/">Inicio</a></li>
	<li><a href="/about/">Acerca de</a></li>
	<li><a href="/contact/">Contáctanos</a></li>
	<li><p>{{ong.nombre}}</p></li>
	<li><a href="/logout/">Cerrar sesión</a></li>
{% endblock %}

{% block principal %}
	<div class="hero-unit">
		<h2>Ingreso de nuevo puesto</h2><br>
		
		<p><b>Informaci&oacute;n requerida para el nuevo puesto</b></p>
		<span style="color:red">*</span> <span>campos obligatorios</span><br><br>
		
		<form action="." method="POST">{% csrf_token %}
			{{ form.non_field_errors }}
			<div hidden=True>
				{{ form.proyecto.errors }}
				{{ form.proyecto }}
			</div>
			<div>
				{{ form.descripcion.errors }}
				<div id="leftcolumn"><label for="id_descripcion">Descripci&oacute;n (<span style="color:red">*</span>)</label></div>
				<div id="rightcolumn">{{ form.descripcion }}</div>
			</div>
			<div>
				{{ form.costo.errors }}
				<div id="leftcolumn"><label for="id_costo">Costo (<span style="color:red">*</span>)</label></div>
				<div id="rightcolumn">{{ form.costo }}</div>
			</div>
			<div>
				{{ form.escolaridad.errors }}
				<div id="leftcolumn"><label for="id_escolaridad">Escolaridad (<span style="color:red">*</span>)</label></div>
				<div id="rightcolumn">{{ form.escolaridad }}</div>
			</div>
			<div>
				{{ form.entregables.errors }}
				<div id="leftcolumn"><label for="id_entregables">Entregables (<span style="color:red">*</span>)</label></div>
				<div id="rightcolumn">{{ form.entregables }}</div>
			</div>
			<div>
				{{ form.forma_trabajo.errors }}
				<div id="leftcolumn"><label for="id_forma_trabajo">Forma de trabajo (<span style="color:red">*</span>)</label></div>
				<div id="rightcolumn">{{ form.forma_trabajo }}</div>
			</div>
			<div>
				{{ form.fecha_limite.errors }}
				<div id="leftcolumn"><label for="id_fecha_limite">Fecha l&iacute;mite (<span style="color:red">*</span>)</label></div>
				<div id="rightcolumn">{{ form.fecha_limite }}</div>
			</div>
			<div>
				{{ form.especialidades.errors }}
				<label for="id_especialidades">Especialidades (<span style="color:red">*</span>)</label>
				{{ form.especialidades }}
			</div>
			<div>
				{{ form.favoritos.errors }}
				<label for="id_favoritos">Favoritos (<span style="color:red">*</span>)</label>
				{{ form.favoritos }}
			</div>
			
			<p><input type="button" class="btn btn-secondary" value="Cancelar" onClick="location.href='..'">
			<input type="submit" class="btn btn-primary" value="Guardar" /></p>
		</form>
	</div>
{% endblock %}
